<script setup>
import {reactive, ref} from "vue";
import {userInfoStore} from "@/pinia/user";
import {ElMessage, ElMessageBox} from "element-plus";

const userInfo = userInfoStore()

const moduleList = reactive([
 {
  title: '智能权证交易系统',
  id: 1
 },
 {
  title: '智能股票交易系统',
  id: 2
 },
 {
  title: '智能期货交易系统',
  id: 3
 },
])

const title = ref('智能期货交易系统')
const moduleId = ref(3)

const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

const onModuleChange = (e) => {
 title.value = e.title
 moduleId.value = e.id
}

const onUserChange = (e) => {
 if (e === 1) {
  ElMessageBox.confirm('是否退出登录？', '提示', {
   confirmButtonText: '确认',
   cancelButtonText: '取消'
  }).then(res => {
   userInfo.handleToken('')
   ElMessage.success('请重新登录')
  }).catch(er => {})
 }
}

</script>

<template>
 <header class="header flex">
  <div class="logo flex">
   <img src="../../assets/image/logo.png" alt="">
   <el-dropdown @command="onModuleChange">
    <div class="el-dropdown-link">
     {{ title }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </div>
    <template #dropdown>
     <el-dropdown-menu>
      <el-dropdown-item v-for="item of moduleList" :command="item" :key="item.id">{{ item.title }}</el-dropdown-item>
     </el-dropdown-menu>
    </template>
   </el-dropdown>
  </div>

  <div class="user flex">
   <el-button size="small" type="primary">用户设置</el-button>
   <el-dropdown @command="onUserChange">
    <div class="el-dropdown-link flex">
     <div class="info flex">
      <el-avatar :size="25" :src="avatar" />
      admin
     </div>
     <el-icon class="el-icon--right">
      <arrow-down />
     </el-icon>
    </div>
    <template #dropdown>
     <el-dropdown-menu>
      <el-dropdown-item :command="0">修改密码</el-dropdown-item>
      <el-dropdown-item :command="1">退出登录</el-dropdown-item>
     </el-dropdown-menu>
    </template>
   </el-dropdown>
  </div>
 </header>
</template>

<style scoped lang="scss">
::v-deep {
 .el-dropdown-link {
  cursor: pointer;
  @include Font((color: $white, size: 18px));
  align-items: center;
 }
}

.header {
 padding: 20px 20px 0;
 justify-content: space-between;

 .logo {
  align-items: center;
  img {
   width: 200px;
   margin-right: 25px;

   .el-dropdown {
    ::v-deep {

    }
   }
  }
 }

 .user {
  align-items: center;
  .el-button {
   margin-right: 10px;
  }

  .info {
   align-items: center;
   .el-avatar {
    margin-right: 10px;
   }
  }
 }
}
</style>